<template>
  <div class="dashboard">
    <div class="card-grid">
      <div
        class="stat-card"
        :style="itemBackgroundStyle(item.id)"
        v-for="item in processedListData"
        :key="item.id"
      >
        <div class="card-title">{{ item.title || "暂无数据" }}</div>
        <div class="card-value" :style="valueBackgroundStyle(item.id)">
          {{ item.value || "---" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StatCard",
  props: {
    listData: { 
      type: Array, 
      default: () => []
    },
    title: {
      type: String,
      required: true,
    },
    // value: {
    //   type: [String, Number],
    //   required: true,
    // },
    bgColor: {
      type: String,
      default: "rgba(0, 0, 0, 0.5)",
    },
  },
  computed: {
    // 确保id为数字类型（包含0）
    processedListData() {
      return this.listData.map(item => ({
        ...item,
        id: Number(item.id) // 强制转换为数字，0会被正确保留
      })).filter(item => !isNaN(item.id)); // 过滤非数字id
    }
  },
  methods: {
    valueBackgroundStyle(id) {
      // 修复：判断id是否为有效数字（包括0），而非单纯判断id是否为真
      if (typeof id === 'number' && !isNaN(id)) {
        const bgMap = {
          0: "#45FFF0",
          1: "#FF973B",
          2: "#E16060",
          3: "#45FFF0",
          4: "#FF973B",
          5: "#E16060",
        };

        const color = bgMap[id];
        if (color) {
          return { color };
        }
      }

      return { backgroundColor: this.bgColor };
    },
    itemBackgroundStyle(id) {
      // 修复：同样调整判断逻辑，确保0能被正确识别
      if (typeof id === 'number' && !isNaN(id)) {
        const bgMap = {
          0: require("@/assets/img/back1.png"),
          1: require("@/assets/img/back2.png"),
          2: require("@/assets/img/back3.png"),
          3: require("@/assets/img/back1.png"),
          4: require("@/assets/img/back2.png"),
          5: require("@/assets/img/back3.png"),
        };

        const imagePath = bgMap[id];
        if (imagePath) {
          return {
            backgroundImage: `url(${imagePath})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          };
        }
      }
    },
  },
};
</script>

<style scoped>
/* 样式保持不变 */
.stat-card {
  height: 98px;
  width: 99.08px;
  padding: 2px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.card-title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}

.card-value {
  margin-top: 1rem;
  font-size: 32px;
  font-weight: bold;
}
.dashboard {
  background-size: cover;
  min-height: 100vh;
  margin: 0 auto;
}

.card-grid {
  place-content: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin: 1% 50%;
}
</style>
    